<template>
    <div class="con">

        <div class="text">

            <textarea name="" id="" rows="5" placeholder="请输入您遇到的问题或建议" v-model="feedbackContent">

            </textarea>
            <div class="cameracon">
                <div class="camerasmallbox">
                    <img src="../assets/images/help/add.png" alt="" class="camerasmall" id="img1">
                    <input type="file" class="filesmall" @change="change1()" id="file1" accept="image/*">

                </div>
                <div class="camerasmallbox" v-show="box2">
                    <img src="../assets/images/help/add.png" alt="" class="camerasmall" id="img2">
                    <input type="file" class="filesmall" @change="change2()" id="file2" accept="image/*">

                </div>
                <div class="camerasmallbox" v-show="box3">
                    <img src="../assets/images/help/add.png" alt="" class="camerasmall" id="img3">
                    <input type="file" class="filesmall" @change="change3()" id="file3" accept="image/*">

                </div>
                <div class="camerasmallbox" v-show="box4">
                    <img src="../assets/images/help/add.png" alt="" class="camerasmall" id="img4">
                    <input type="file" class="filesmall" @change="change4()" id="file4" accept="image/*">

                </div>

            </div>

            <p class="choose">选择反馈类型</p>
            <div class="type">

                <dl>
                    <dd class="fl" @click="type(1)">
                        <img src="../assets/images/help/radio.png" alt="" v-show="show1">
                        <img src="../assets/images/help/check.png" alt="" v-show="!show1">
                    </dd>
                    <dt class="fl">程序bug</dt>
                </dl>
                <dl>

                    <dd class="fl" @click="type(2)"><img src="../assets/images/help/radio.png" alt="" v-show="show2">

                        <img src="../assets/images/help/check.png" alt="" v-show="!show2"></dd>
                    <dt class="fl">功能/内容建议</dt>
                </dl>
                <dl>

                    <dd class="fl" @click="type(3)"><img src="../assets/images/help/radio.png" alt="" v-show="show3">

                        <img src="../assets/images/help/check.png" alt="" v-show="!show3"></dd>
                    <dt class="fl">其他</dt>
                </dl>
            </div>

            <input type="number" placeholder="输入手机号" class="phone" v-model="phone" oninput="if(this.value.length>11) this.value = this.value.slice(0,11);" pattern="[0-9]*">

            <div class="ok" @click="ok()" :class="{ graybtn: isgraybtn }">
                <button id="graybtn">提交</button>
            </div>

        </div>

    </div>
</template>

<script>
import add from "@/assets/images/help/add.png";
export default {
    name: "feedback",
    data() {
        return {
            show1: false,
            show2: true,
            show3: true,
            feedbackTypeKey: 1,
            feedbackContent: "",
            box2: false,
            box3: false,
            box4: false,
            fileId1: "",
            fileId2: "",
            fileId3: "",
            fileId4: "",
            timestamp: "",
            phone: "",
            isgraybtn: false,
            add: add
        };
    },
    methods: {
        change1() {
            var file1 = document.getElementById("file1").files[0];
            var param = new FormData();
            param.append("file", file1);
            param.append("imageIndex", 1);


            this.axios({
                method: "post",
                url: `${this.siteUrl}/filecenter/h5/uploadImage.do?appid=web.2018&timestamp=${
                    this.timestamp
                }`,
                data: param
            })
                .then(response => {
                    if (response.data.success == 1) {
                        this.fileId1 = response.data.data.fileId;
                        this.box2 = true;
                        document.getElementById("img1").src =
                            response.data.data.smallShowUrl;
                        document.getElementById("img1").style.width = "56px";
                        document.getElementById("img1").style.height = "56px";
                        document.getElementById("img1").style.marginTop = "0px";
                        document.getElementById("img1").style.marginLeft =
                            "0px";
                    } else {
                        this.$Message.error(response.data.message);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        change2() {
            var file2 = document.getElementById("file2").files[0];
            var param = new FormData();
            param.append("file", file2);
            param.append("imageIndex", 2);
            this.axios({
                method: "post",
                url: `${this.siteUrl}/filecenter/h5/uploadImage.do?appid=web.2018&timestamp=${
                    this.timestamp
                }`,
                data: param
            })
                .then(response => {
                    if (response.data.success == 1) {
                        this.fileId2 = response.data.data.fileId;
                        this.box3 = true;
                        document.getElementById("img2").src =
                            response.data.data.smallShowUrl;
                        document.getElementById("img2").style.width = "56px";
                        document.getElementById("img2").style.height = "56px";
                        document.getElementById("img2").style.marginTop = "0px";
                        document.getElementById("img2").style.marginLeft =
                            "0px";
                    } else {
                        this.$Message.error(response.data.message);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        change3() {
            var file3 = document.getElementById("file3").files[0];
            var param = new FormData();
            param.append("file", file3);
            param.append("imageIndex", 3);
            this.axios({
                method: "post",
                url: `${this.siteUrl}/filecenter/h5/uploadImage.do?appid=web.2018&timestamp=${
                    this.timestamp
                }`,
                data: param
            })
                .then(response => {
                    if (response.data.success == 1) {
                        this.fileId3 = response.data.data.fileId;
                        this.box4 = true;
                        document.getElementById("img3").src =
                            response.data.data.smallShowUrl;
                        document.getElementById("img3").style.width = "56px";
                        document.getElementById("img3").style.height = "56px";
                        document.getElementById("img3").style.marginTop = "0px";
                        document.getElementById("img3").style.marginLeft =
                            "0px";
                    } else {
                        this.$Message.error(response.data.message);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        change4() {
            var file4 = document.getElementById("file4").files[0];
            var param = new FormData();
            param.append("file", file4);
            param.append("imageIndex", 4);
            this.axios({
                method: "post",
                url: `${
                    this.siteUrl
                }/filecenter/h5/uploadImage.do?appid=web.2018&timestamp=${this.timestamp}`,
                data: param
            })
                .then(response => {
                    if (response.data.success == 1) {
                        this.fileId4 = response.data.data.fileId;

                        document.getElementById("img4").src =
                            response.data.data.smallShowUrl;
                        document.getElementById("img4").style.width = "56px";
                        document.getElementById("img4").style.height = "56px";
                        document.getElementById("img4").style.marginTop = "0px";
                        document.getElementById("img4").style.marginLeft =
                            "0px";
                    } else {
                        this.$Message.error(response.data.message);
                    }
                })
                .catch(function(error) {
                    console.log(error);
                });
        },
        type(n) {
            this.feedbackTypeKey = n;
            switch (n) {
                case 1:
                    this.show1 = false;
                    this.show2 = true;
                    this.show3 = true;
                    break;
                case 2:
                    this.show2 = false;
                    this.show1 = true;
                    this.show3 = true;

                    break;
                case 3:
                    this.show3 = false;
                    this.show1 = true;
                    this.show2 = true;

                    break;
            }
        },
        // 提交
        ok() {
            var myreg = /^[1][0-9]{10}$/;
            if (this.feedbackContent == "") {
                this.$Message.warning("请输入您的问题");
            } else if (this.phone == "") {
                this.$Message.warning("请输入你的手机号");
            } else if (!myreg.test(this.phone)) {
                this.$Message.error("请填写正确的手机号");
            } else {
                document.getElementById("graybtn").disabled = true;
                this.isgraybtn = true;

                this.axios({
                    method: "post",
                    url: `${
                        this.siteUrl
                    }/h5/opinion/feedback/addOpinion.do?appid=web.2018&timestamp=${
                        this.timestamp
                    }`,
                    data: {
                        feedbackTypeKey: this.feedbackTypeKey, //1 程序BUG/2功能及内容建议/3其他
                        feedbackContent: this.feedbackContent,
                        vendorId: 2440,
                        loginUserId: "1551",
                        feedbackChannelKey: 2,
                        fileIds: `${this.fileId1};${this.fileId2};${
                            this.fileId3
                        };${this.fileId4}`,
                        phone: this.phone
                    }
                })
                    .then(response => {
                        console.log(response)
                        if (response.data.success == 1) {
                            document.getElementById("graybtn").disabled = false;
                            this.isgraybtn = false;
                            this.$Message.success("提交成功");
                            this.feedbackContent = "";
                            this.phone = "";
                            this.box2 = false;
                            this.box3 = false;
                            this.box4 = false;
                            document.getElementById("img1").src = `${this.add}`;
                            document.getElementById("img1").style.width =
                                "20px";
                            document.getElementById("img1").style.height =
                                "20px";
                            document.getElementById("img1").style.marginTop =
                                "18px";
                            document.getElementById("img1").style.marginLeft =
                                "18px";
                        } else {
                            this.$Message.error(response.data.message);
                            document.getElementById("graybtn").disabled = false;
                            this.isgraybtn = false;
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    });
            }
        }
    },
    mounted() {
        this.timestamp = Date.parse(new Date());
        this.$Message.config({
            top: 200,
            duration: 1
        });
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.con {
    width: 100%;
    min-height: 100vh;
}

.text {
    border: 1px solid #ddd;
    width: 90%;
    margin-left: 5%;
    margin-top: 24px;
    height: 200px;
}
.text textarea {
    width: 100%;
    resize: none;
    padding: 10px;
    border:none;
    font-size: 14px;
}

.cameracon {
    width: 100%;
    margin: 0 auto;
    height: 56px;
}

.file {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 194px;
    height: 129px;
    margin-left: -97px;
    margin-top: -64.5px;
    opacity: 0;
    z-index: 999;
}
.camerasmallbox {
    display: inline-block;
    width: 56px;
    position: relative;
    height: 100%;
    border: 1px dashed #ddd;
    margin-left: 10px;
}
.camerasmallbox img {
    width: 20px;
    height: 20px;
    margin-left: 18px;
    margin-top: 18px;
}
.filesmall {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.choose {
    margin-top: 20px;
    font-size: 14px;
    color: #999;
}

dl {
    width: 30%;
    margin-top: 10px;
    float: left;
    font-size: 14px;
}
dl:nth-child(2) {
    width: 40%;
}
dl dd {
    width: 24px;
}

dl dd img {
    width: 16px;
    margin-left: 2px;
    margin-top: 2px;
}

button {
    width: 100%;
    height: 44px;
    line-height: 44px;
    text-align: center;
    background: #37b1b3;
    color: #fff;
    margin-top: 36px;
    border-radius: 4px;
    font-size: 16px;
}

.phone {
    margin-top: 30px;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
}

.graybtn button {
    opacity: 0.5;
}
</style>
